<!--
 * @description: 
 * @Date: 2022-10-10 23:54:34
 * @LastEditTime: 2022-12-04 19:49:11
-->

<template>
  <div @contextmenu.preven class="w-full h-full note">
    <div
      v-if="RC === '1x1'"
      class="w-full h-full flex items-center justify-center"
      @click="openWindow()"
    >
      <svg
        width="38px"
        height="38px"
        viewBox="0 0 48 48"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M7 37C7 29.2967 7 11 7 11C7 7.68629 9.68629 5 13 5H35V31C35 31 18.2326 31 13 31C9.7 31 7 33.6842 7 37Z"
          fill="none"
          stroke="rgb(248, 162, 34)"
          stroke-width="4"
          stroke-linejoin="round"
        />
        <path
          d="M35 31C35 31 14.1537 31 13 31C9.68629 31 7 33.6863 7 37C7 40.3137 9.68629 43 13 43C15.2091 43 25.8758 43 41 43V7"
          stroke="rgb(248, 162, 34)"
          stroke-width="4"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M14 37H34"
          stroke="rgb(248, 162, 34)"
          stroke-width="4"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
    <div v-else class="note2">
      <div class="note-head" @click="openWindow()">
        <el-icon size="20px">
          <svg
            width="80%"
            height="80%"
            viewBox="0 0 48 48"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M7 37C7 29.2967 7 11 7 11C7 7.68629 9.68629 5 13 5H35V31C35 31 18.2326 31 13 31C9.7 31 7 33.6842 7 37Z"
              fill="none"
              stroke="#fff"
              stroke-width="4"
              stroke-linejoin="round"
            />
            <path
              d="M35 31C35 31 14.1537 31 13 31C9.68629 31 7 33.6863 7 37C7 40.3137 9.68629 43 13 43C15.2091 43 25.8758 43 41 43V7"
              stroke="#fff"
              stroke-width="4"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M14 37H34"
              stroke="#fff"
              stroke-width="4"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </el-icon>
        <span>备忘录</span>
        <div class="ml-auto mr-3 pt-1" @click.stop>
          <el-icon v-if="titleHidden" color="#fff" @click.stop="setTitleHidden(false)">
            <Hide />
          </el-icon>
          <el-icon v-else color="#fff" @click.stop="setTitleHidden(true)">
            <View />
          </el-icon>
        </div>
      </div>
      <div class="note-body flex flex-col pt-1" @click="openWindow()">
        <transition v-for="(item, index) in list" :key="index">
          <div class="text-ellipsis pl-2 pr-2">{{ getTitle(item.title) }}</div>
        </transition>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onUnmounted, defineProps, watch } from "vue";
import ajax from "../../util/ajax";
import cache from "../../util/cache";
import emitter from "@/util/emitter.js";
import redirectUrl from "../../util/href";
import { Hide, View } from "@element-plus/icons-vue";
const list = ref(cache.get("noteList", []));
const titleHidden = ref(cache.get("noteTitleHidden", false));
const props = defineProps({
  data: { type: Object, default: () => ({ size: "1x1" }) },
});
const RC = ref(props.data.size);
const refresh = (data) => {
  RC.value = data.size;
};
const setTitleHidden = (e) => {
  titleHidden.value = e;
  cache.set("noteTitleHidden", e);
};
const getTitle = (e) => {
  return titleHidden.value ? e.replace(/./g, "*") : e;
};
const render = (li) => {
  let l = li.length;
  let k = 4 - l;
  let t = [];
  for (let i = 0; i < k; i++) {
    t.push({ id: Math.random(), title: "" });
  }
  let a = [...li, ...t];
  list.value = a;
  cache.set("noteList", a);
};
if (Boolean(cache.get("token", false))) {
  ajax({
    url: "/note/get",
    method: "get",
    params: {
      sort: cache.get("noteSort", "desc"),
      limit: 4,
    },
  }).then((el) => {
    render(el.data);
  });
}
const openWindow = () => {
  redirectUrl("tab://noteWindow");
};
if (props.data?.id) {
  watch(props.data, (e) => {
    refresh(e);
  });
}
const loading = (data) => {
  render(data);
};
emitter.on("noteLoading", loading);
onUnmounted(() => {
  emitter.off("noteLoading", loading);
});
</script>
<style lang="less">
.note {
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;

  .note-head {
    background-color: rgb(248, 162, 34);
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 12px;

    > span {
      margin-left: 5px;
      font-size: 15px;
      font-weight: 600;
      color: #fff;
    }
  }

  .note2 {
    height: 100%;
    width: 100%;
  }

  .note-body {
    height: calc(100% - 40px);
    background-color: #fff;

    > div {
      position: relative;
      font-size: 14px;
      overflow: hidden;
      word-break: normal;
      white-space: nowrap;
      height: 28px;
      line-height: 27px;
      border-bottom: 1px solid rgba(221, 221, 221, 0.466);

      &:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>
